import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { Input, Select, DatePicker, Icon, Layout, Button, message } from "antd";
import "antd/dist/antd.css";
import "./style.scss";
import ClickShare from "../../../../../common/components/ClickShare/ClickShare"
import { fetchVersionApi } from "../../../../../common/api";
import moment from "moment";

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Header } = Layout;



class HeaderBar extends Component {

  static propTypes = {
    filterConditions: PropTypes.object,
    updateFilterConditions: PropTypes.func,
    fetchTasks: PropTypes.func,
    fetchTrendData: PropTypes.func,
    type: PropTypes.string
  };

  static defaultProps = {
    filterConditions: {
      deviceId: "",
      platform: 0,
      version: "",
      unionId: "",
      page: "",
      beginTime: moment().startOf("week"),
      endTime: moment().startOf("day")
    },
    updateFilterConditions: null,
    fetchTasks: null,
    fetchTrendData: null
  };

  state = {
    versions: [
      { value: "", label: "全部版本" },
      { value: "1.0", label: "1.0" }
    ], // 存储版本数据的数组
  };

  componentDidMount() {
    fetchVersionApi().then(data => {
      this.setState({ versions: data });
    }).catch(error => {
      console.error("Error fetching versions:", error);
    });
  }

  render() {
    const { filterConditions, type } = this.props;
    return (
      <div>
        <Header className="header">
          <div className="tasklist-filterbar-container">
            <Input.Group compact className="filterbar-group">
              {
                type !== "web" &&
                <Select
                  data-test="platform-selector"
                  value={filterConditions.version}
                  onChange={this.handleVerionChange}
                  style={{ minWidth: "100px" }}
                >
                  {this.state.versions.map(option => (
                    <Option key={option.value} value={option.value}>{option.label}</Option>
                  ))}
                </Select>
              }
              {
                type === "page-analysis" &&
                <Input
                  data-test="page-input"
                  className="input-page"
                  placeholder="请输入页面名称"
                  value={filterConditions.page}
                  onChange={this.handlePageChange}
                  suffix={
                    filterConditions.page ? (
                      <Icon
                        data-test="clean-page-icon"
                        className="empty-search"
                        key="empty-search"
                        type="close-circle"
                        onClick={this.handleCleanPage}
                      />
                    ) : (
                      <span />
                    )
                  }
                />
              }
              <Input
                data-test="unionId-input"
                // className="input-unionId"
                // style={{ width: 849 }}
                placeholder="用户标识"
                value={filterConditions.unionId}
                onChange={this.handleUnionIdChange}
                suffix={
                  filterConditions.unionId ? (
                    <Icon
                      data-test="clean-unionId-icon"
                      className="empty-search"
                      key="empty-search"
                      type="close-circle"
                      onClick={this.handleCleanUionId}
                    />
                  ) : (
                    <span />
                  )
                }
              />
            </Input.Group>
          </div>
        </Header>
        <Header className="header">
          <div className="tasklist-filterbar-container">
            <Input.Group compact className="filterbar-group">
              {
                type !== "web" &&
                <Select
                  data-test="platform-selector"
                  value={filterConditions.platform}
                  onChange={this.handlePlatformChange}
                  style={{ minWidth: "100px" }}
                >
                  <Option value={0}>全部平台</Option>
                  <Option value={1}>Android</Option>
                  <Option value={2}>iOS</Option>
                </Select>
              }
              <RangePicker
                data-test="range-picker"
                allowClear={false}
                format="YYYY-MM-DD"
                placeholder={["起始时间", "结束时间"]}
                onChange={this.handleTimeRangeChange}
                value={[moment(filterConditions.beginTime), moment(filterConditions.endTime)]}
                style={{ minWidth: "240px" }}
              />
              <Input
                data-test="deviceId-input"
                className="filter-input"
                placeholder="设备编号"
                value={filterConditions.deviceId}
                onChange={this.handleDeviceIdChange}
                suffix={
                  filterConditions.deviceId ? (
                    <Icon
                      data-test="clean-deviceId-icon"
                      className="empty-search"
                      key="empty-search"
                      type="close-circle"
                      onClick={this.handleCleanDeviceId}
                    />
                  ) : (
                    <span />
                  )
                }
              />
            </Input.Group>
            <Button data-test="search-button" icon="search" type="primary" onClick={this.handleSearch} style={{ marginLeft: 10, marginRight: 5 }}>
              搜索
            </Button>
            <ClickShare buttonId={"share-button"} shareUrl={this.composeShareUrl()} buttonText={"分享"} />
          </div>
        </Header>
      </div>
    );
  }

  composeShareUrl = () => {
    const { filterConditions, type, pathname } = this.props;
    if (type === "native") {
      return `${window.location.origin}/#${pathname}?deviceId=${filterConditions.deviceId}&beginTime=${moment(filterConditions.beginTime).valueOf()}&endTime=${moment(filterConditions.endTime).valueOf()}&platform=${filterConditions.platform}`
    } else {
      return `${window.location.origin}/#${pathname}?deviceId=${filterConditions.deviceId}&beginTime=${moment(filterConditions.beginTime).valueOf()}&endTime=${moment(filterConditions.endTime).valueOf()}`
    }
  };

  // event handlers
  handleSearch = () => {
    const { filterConditions, fetchTasks, type } = this.props;
    // if (type === "native" && filterConditions.deviceId === "") {
    //   message.error("必须填写设备编号才能进行查询！");
    //   return;
    // }

    if (type === "web") {
      fetchTasks({
        deviceId: filterConditions.deviceId,
        beginTime: moment(filterConditions.beginTime).valueOf(),
        endTime: moment(filterConditions.endTime).valueOf()
      })
    } else {
      fetchTasks({
        deviceId: filterConditions.deviceId,
        platform: filterConditions.platform,
        version: filterConditions.version,
        unionId: filterConditions.unionId,
        page: filterConditions.page,
        beginTime: moment(filterConditions.beginTime).valueOf(),
        endTime: moment(filterConditions.endTime).valueOf()
      });
      //  fetchTrendData方法导致搜索之后页面卡顿 fetchTrendData方法在搜索之后无实际用处
      // fetchTrendData({
      //   deviceId: filterConditions.deviceId,
      //   platform: filterConditions.platform,
      //   version: filterConditions.version,
      //   unionId: filterConditions.unionId,
      //   page: filterConditions.page,
      //   beginTime: moment(filterConditions.beginTime).valueOf(),
      //   endTime: moment(filterConditions.endTime).valueOf()
      // })
    }
  };

  handleDeviceIdChange = e => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      deviceId: e.target.value
    });
  };

  handleCleanDeviceId = () => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      deviceId: ""
    });
  };

  handleUnionIdChange = e => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      unionId: e.target.value
    });
  };

  handleCleanUionId = () => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      unionId: ""
    });
  };

  handlePageChange = e => {
    const { filterConditions, updateFilterConditions } = this.props;

    console.log(e);
    console.log(e.target.value);
    updateFilterConditions({
      ...filterConditions,
      page: e.target.value
    });
  };

  handleCleanPage = () => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      page: ""
    });
  };

  handlePlatformChange = value => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      platform: value
    });
  };

  handleVerionChange = value => {
    const { filterConditions, updateFilterConditions } = this.props;

    updateFilterConditions({
      ...filterConditions,
      version: value
    });
  };

  handleTimeRangeChange = value => {
    const { filterConditions, updateFilterConditions } = this.props;
    const [beginMoment, endMoment] = value;

    if (endMoment.diff(beginMoment) >= 7 * 86400000) {
      message.warn("请保证选择的时间范围不超过7天");
      return;
    }
    updateFilterConditions({
      ...filterConditions,
      beginTime: beginMoment.valueOf(),
      endTime: endMoment.valueOf()
    });

  };
}

function mapStateToProps(state) {
  return {
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    hash: state.router.location.hash,
  }
}

export default connect(mapStateToProps)(HeaderBar);
